<!DOCTYPE html>
<html lang="en">

<!-- Author: Hadeel Mohamed 
The following code is jquery code to validate the start date and end date as well as the start time and end time and it displays an error message
if the entered information is not correct-->

  <head>
    <meta charset="utf-8">
    <title>Edit Basic Info</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="http://localhost:8000/static/bootstrap.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script type="text/javascript">
  $().ready(function() {

	    $.validator.addMethod("time", function(value, element) {  
	    return this.optional(element) || /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);  
	    },"Please enter a valid time in the format HH:MM.");

	        $("#input").validate({
	                rules: {
	                        time: "required time",
	                },

	        });

	    });

  $(document).ready(function(){
		$('#input').validate();
		});	



$(document).ready(function(){
$('#startDay').datepicker({
	dateFormat:'yy-mm-dd', minDate:0

});
$('#endDay').datepicker({dateFormat:'yy-mm-dd', minDate:0});

});

function dateCheck(){
	var startDate = new Date($('#startDay').val());
	var endDate = new Date ($('#endDay').val());
	var startTime = ($('#StartTime').val());
	var endTime = ($('#EndTime').val());
	var minDate= $(".selector").datepicker("option","minDate");
	var fullDate = new Date()
	$(".selector").datepicker("option","minDate",fullDate);
//	var myDate = new Date();

	var twoDigitMonthC = ("0" + (fullDate.getMonth() + 1)).slice(-2)
	var twoDigitMonthS = ("0" + ($('#startDay').datepicker("getDate").getMonth() + 1)).slice(-2)
//	var twoDigitMonth = ((fullDate.getMonth().length+1) === 1)? (fullDate.getMonth()+1) : '0' + (fullDate.getMonth()+1);
//	var currentDate = fullDate.getDate() + "/" + twoDigit + "/" + fullDate.getFullYear();
//	console.log(currentDate); 
	var currentDate = fullDate.getFullYear() + "-" + twoDigitMonthC + "-" +fullDate.getDate() ;
	console.log(currentDate); 
	var sDate = $('#startDay').datepicker("getDate").getFullYear() + "-" + twoDigitMonthS+ "-" +$('#startDay').datepicker("getDate").getDate() ;
	console.log(sDate);




	if ( $('#startDay').datepicker("getDate") > $('#endDay').datepicker("getDate") || sDate< currentDate ){

		$('#dateError').show();

	    return false;

	}
	else
		{
		if (startTime > endTime){
			   $('#timeError').show();
			   return false;
			}
		else
			{

			$('#dateError').hide();
			$('#timeError').hide();
		return true;
		}

}
}



</script>
 
</head>

 <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <ul class="nav">

          <a class="brand" href="/homePage/">Eventati</a>
          <li><a href ="/DashboardHome/">Home Page</a></li>      
          <li > <a href="/AboutUs/">About Us</a></li>
          <li><a href="/ViewInstructions/">Instructions</a></li>
          <li><a href  ="/Terms&Conditions/">  Terms & Conditions</a></li>
         <li><a href  ="/News/">  Latest News and Updates</a></li>
         <li><a href ="/Faqs/"> FAQS</a></li>
         <li><a href ="/Contactus/"> Contactus</a></li>
		<!-- Author: Amina Kadry This form is for logging the user out of his account -->
         <li><a href="/logout/" method="POST">Log out</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <!-- Main hero unit for a primary marketing message or call to action -->
      		<h1>Basic Event Information</h1>
      
      <div class="hero-unit">
<ul>

	 <form  id="input" name="myform" action="/EditBasicInformation/" onclick="return dateCheck();" method="POST">
	<div align="left"><br>
	{% csrf_token %}

	<h2>{{template.name}}</h2>
	Your Event Name*: <input title="Please enter event name" name="EventName" id="en" name="en" type="text" size="18" value=""  class = "required"/>
	<br>


	Start Date*:
	<input id="startDay" name="startDay" value="" class = "required"/><br>
	End Date*:
	<input id="endDay" name="endDay" value="" class = "required"/><br>




	<div id="dateError" style="display:none;">  Please enter valid dates</font> </div>






	<br>
	<br>



	Start Time*:<input id="StartTime" name="StartTime"  value="{{template.startTime}}" type="time" class = "required"/><br />
	End Time*:<input id="EndTime" name="EndTime" input value="{{template.endTime}}" type="time" size="18" class = "required"/><br />
	<div id="timeError" style="display:none;">  End time and start time are not valid</font> </div>

	<!-- Author: Hadeel Mohamed 
	The following code checks if the template name is Wedding or Engagement it allows the Creator to edit the bride name and the groom name while if its Birthday, 
	Concert or Charity it allows him/her to edit the birthday owner, Singer name or Charity type-->

	{% if template.name|stringformat:"s" == "Wedding"  %}
	Bride's Name: <input title="Bride's Name" name="BrideName" id="bn" name="bn" type="text" size="18" value="{{template.brideName}}"> (optional)<br />
	Groom's Name: <input title="Groom's Name" name="GroomName" id="gn" name="gn" type="text" size="18" value="{{template.groomName}}">(optional)<br />
	      {% endif %}

	{% if template.name|stringformat:"s" == "Engagement"  %}
	Bride's Name: <input title="Bride's Name" name="BrideName" id="bn" name="bn" type="text" size="18" value="{{template.brideName}}">(optional)<br />     
	Groom's Name: <input title="Groom's Name" name="GroomName" id="gn" name="gn" type="text" size="18" value="{{template.groomName}}">(optional)<br />
	        {% endif %}

	{% if template.name == "Birthday"  %}
	Birthday's Owner: <input title="Birthday's Owner" name="BirthdayOwner" id="bo" name="bo" type="text" size="18" value="{{template.birthdayOwner}}">(optional)<br />
	        {% endif %}

	{% if template.name|stringformat:"s" == "Concert"  %}
	Singer's Name: <input title="Singer's Name" name="SingerName" id="sn" name="sn" type="text" size="18" value="{{template.singerName}}" >(optional)<br />
	       {% endif %}

	{% if template.name|stringformat:"s" == "Charity"  %}    
	Charity Type: <input title="Charity Type" name="CharityType" id="ct" name="ct" type="text" size="18" value="{{template.charityType}}" >(optional)<br />
	        {% endif %}

	{% if template.name|stringformat:"s" == "Create your own template"  %}    
	Description :  <!-- <input title="Description" name="Description" id="dc" name="dc" type="text" size="18" value="{{event.template.description}}" >(optional)<br /> -->
	      <br />
	        <textarea name="description" rows="20" cols="40" value="{{event.template.description}}" >
	</textarea>(optional)<br />


	        {% endif %}


<br>
<br>

<!-- Author: Hadeel Mohamed
The following code is a button that the Creator user will press after he/she edits the basic information of the event, 
the button will redirect the Creator user to the event page again with the new information that have been edited-->

<title>Edited Info</title><form name="edited info" action="/viewEvent/" method="POST">
{%csrf_token%}
<button type = "submit" value="submit">submit</button> 
</form>
      </div>   
      </div>

      <hr>
    <footer>
      <p class="pull-center">
		 <a href="/AboutUs/">About Us</a>
				<a href="/ViewInstructions/">Instructions</a>
				<a href  ="/Terms&Conditions/">  Terms & Conditions</a>
				<a href  ="/News/">  Latest News and Updates</a>
				<a href ="/Faqs/"> FAQS</a>
				<a href ="/Contactus/"> Contactus</a>
				<p class="pull-right"><a href="#">Back to top</a></p>

				        <p>&copy; Company 2012</p>      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>